import React, { useState, useEffect, useRef } from 'react';
import styles from './style.less';
import { Table, Space, Row, Col, Button, Switch } from 'antd';
import Query from '@/components/Global/Query/index';
// import QueryDemo from '@/components/Global/QueryDemo';
import Footer from '@/components/Global/Footer';
import { ColumnsType } from 'antd/es/table';
import { PlanColumn } from './data';
import { getTable } from './service';
// import { useHistory } from 'react-router-dom';
import { history } from 'umi';

function onChange(checked: boolean) {
  console.log(`switch to ${checked}`);
}

let columns: ColumnsType<PlanColumn> = [
  {
    title: '计划名称',
    dataIndex: 'planName',
    key: 'planName',
    // className: `${styles.content} ${styles.plan}`,
    className: styles.content,
    width: 210,
    // align: 'center'
    // onCell(record, rowIndex) {
    //   console.log(record, rowIndex)
    //   return {
    //       className: styles[`.....`],
    //   };
    // }
  },
  {
    title: '计划状态',
    dataIndex: 'extendStatus',
    key: 'extendStatus',
    sorter: (a, b) => a.status - b.status,
    // align: 'center',
    className: styles.content,
    width: 150,
  },
  {
    title: '推广平台',
    dataIndex: 'putPlatform',
    key: 'putPlatform',
    // align: 'center',
    className: styles.content,
    width: 200,
  },
  {
    title: '推广账号',
    dataIndex: 'accountChannel',
    key: 'accountChannel',
    // align: 'center'
    className: styles.content,
    width: 300,
  },
  {
    title: '平台状态',
    dataIndex: 'status',
    key: 'status',
    // align: 'center'
    className: styles.content,
    width: 150,
  },
  {
    title: '启用/暂停',
    dataIndex: 'extendStatus',
    key: 'extendStatus',
    // align: 'center'
    className: styles.content,
    width: 150,
    render(text: string, row) {
      // console.log(text, row, index);
      return row.extendStatus ? (
        <>
          <Switch defaultChecked={row.extendStatus !== '0'} onChange={onChange} />
          <label>{row.extendStatus === '0' ? '启动' : '停用'}</label>
        </>
      ) : (
        <div>-</div>
      );
    },
  },
  {
    title: '关联楼盘',
    dataIndex: 'buildingName',
    key: 'buildingName',
    // align: 'center'
    className: styles.content,
    width: 300,
  },
  {
    title: '推广目的',
    dataIndex: 'extendTarget',
    key: 'extendTarget',
    // align: 'center'
    className: styles.content,
    width: 200,
  },
  {
    title: '消耗',
    dataIndex: 'consume',
    key: 'consume',
    // align: 'center'
    className: styles.content,
    width: 200,
  },
  {
    title: '每日预算',
    dataIndex: 'budget',
    key: 'budget',
    // align: 'center'
    className: styles.content,
    width: 200,
  },
  {
    title: '展示次数',
    dataIndex: 'showNo',
    key: 'showNo',
    // align: 'center'
    className: styles.content,
    width: 150,
  },
  {
    title: '点击次数',
    dataIndex: 'clickNo',
    key: 'clickNo',
    // align: 'center'
    className: styles.content,
    width: 150,
  },
  {
    title: '点击率',
    dataIndex: 'clickRate',
    key: 'clickRate',
    // align: 'center'
    className: styles.content,
    width: 150,
  },
  {
    title: '点击均价',
    dataIndex: 'avgClickPrice',
    key: 'avgClickPrice',
    // align: 'center'
    className: styles.content,
    width: 150,
  },
  {
    title: '播放数',
    dataIndex: 'playNo',
    key: 'playNo',
    // align: 'center'
    className: styles.content,
    width: 150,
  },
  {
    title: '有效播放数',
    dataIndex: 'validPlayNo',
    key: 'validPlayNo',
    // align: 'center'
    className: styles.content,
    width: 150,
  },
  {
    title: '有效播放成本',
    dataIndex: 'validPlayCost',
    key: 'validPlayCost',
    // align: 'center'
    className: styles.content,
    width: 150,
  },
  {
    title: '有效播放率',
    dataIndex: 'validPlayRate',
    key: 'validPlayRate',
    // align: 'center'
    className: styles.content,
    width: 150,
  },
  {
    title: '25%进度播放数',
    dataIndex: 'play25Break',
    key: 'play25Break',
    // align: 'center'
    className: styles.content,
    width: 150,
  },
  {
    title: '50%进度播放数',
    dataIndex: 'play50Break',
    key: 'play50Break',
    // align: 'center'
    className: styles.content,
    width: 150,
  },
  {
    title: '75%进度播放数',
    dataIndex: 'play75Break',
    key: 'play75Break',
    // align: 'center'
    className: styles.content,
    width: 150,
  },
  {
    title: '99%进度播放数',
    dataIndex: 'play99Break',
    key: 'play99Break',
    // align: 'center'
    className: styles.content,
    width: 150,
  },
  {
    title: '完播率',
    dataIndex: 'playOverRate',
    key: 'playOverRate',
    // align: 'center'
    className: styles.content,
    width: 150,
  },
  {
    title: '操作',
    key: 'operation',
    // align: 'center',
    className: `${styles.content} ${styles.action}`,
    width: 130,
    fixed: 'right',
    render: () => (
      // text:string, record:object
      <Space size="middle">
        <a>编辑</a>
        <a>删除</a>
      </Space>
    ),
  }
];

let queryList = [];

let params = {
  planName: '',
  putPlatform: '',
  extendStatus: null,
  accountChannel: '',
  platformAccount: 'null',
  starTime: '2021-07-19',
  endTime: '2021-07-19',
  page: 1,
  pageSize: 10,
};

export default function PlanTable(props: any) {
  console.log(props, '计划props');

  // 判断是否从账号管理进入
  if (props.loginFlag === true) {
    queryList = [
      {
        name: 'planName',
        label: '计划名称',
        type: 'input',
        tips: '请输入计划名称',
        colNum: 4
      },
      {
        name: 'status',
        label: '计划状态',
        type: 'select',
        tips: '请选择计划状态',
        children: [
          {
            value: '0',
            label: '正常',
          },
          {
            value: '1',
            label: '失败',
          },
        ],
        colNum: 5
      },
      {
        name: 'time',
        label: '统计时间',
        type: 'date',
        tips: '请选择计划状态',
        colNum: 8
      }
    ];
  } else {
    queryList = [
      {
        name: 'planName',
        label: '计划名称',
        type: 'input',
        tips: '请输入计划名称',
        colNum: 4
      },
      {
        name: 'platformAccount',
        label: '推广平台',
        type: 'input',
        tips: '请输入推广平台',
        colNum: 4
      },
      {
        name: 'status',
        label: '计划状态',
        type: 'select',
        tips: '请选择计划状态',
        colNum: 5,
        children: [
          {
            value: '0',
            label: '正常',
          },
          {
            value: '1',
            label: '失败',
          },
        ],
      },
      {
        name: 'time',
        label: '统计时间',
        type: 'date',
        colNum: 7,
        tips: '请选择计划状态',
      }
    ];
  }

  const [tableData, setTableData] = useState([]);
  const [page, setPage] = useState(1);
  const btnRef = useRef<any>(null!);
  // console.log(btnRef, '父组件');

  const reset = () => {
    const form = btnRef.current.getForm();
    form.resetFields();
    console.log('清空了表单开始处理逻辑');
    params = {
      planName: '',
      putPlatform: '',
      extendStatus: null,
      accountChannel: '',
      platformAccount: 'null',
      starTime: '2021-07-19',
      endTime: '2021-07-19',
      page: 1,
      pageSize: 10
    };
    getTable(params).then((res) => {
      console.log(res, '请求结果');
      if (res) {
        setTableData(res.result.list);
        setPage(res.pageNum * 1);
      }
    });
  };

  const query = (value: any) => {
    // console.log(value, '表单数据');
    params = {
      ...params,
      ...value,
    };
    getTable(params).then((res) => {
      // console.log(res, '请求结果');
      if (res) {
        setTableData(res.result.list);
        setPage(res.pageNum * 1);
      }
    });
  };

  // const history = useHistory();

  const addPlan = () => {
    console.log(history);
    console.log(history.location.pathname);
    console.log(history.length);
    // history.replace('/promotion/promotion_accounts/detail');
    // history.replace('/promotion/promotion_accounts/detail', {
    //   query: {
    //     name: 'test'
    //   }
    // });
    history.push('/information/promotion_plan/detail', {
      name: 'test',
    });
  };

  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: PlanColumn[]) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    }
  };

  useEffect(() => {
    getTable(params).then((res) => {
      console.log(res, '请求结果');
      if (res) {
        setTableData(res.result.list);
        setPage(res.pageNum * 1);
        // setTableData([]);
      }
    });
  }, []);
  return (
    <>
      <Query flag queryList={queryList} queryClick={query} resetClick={reset} ref={btnRef} />
      <Row>
        <Col flex="auto">
          <Table<PlanColumn>
            dataSource={tableData}
            rowSelection={{
              ...rowSelection,
            }}
            columns={columns}
            pagination={false}
            rowKey={(record) => record.id}
            // locale={{ emptyText: "空空如也呀~" }}
            scroll={{ y: 600 }}
            className={styles.table}
          ></Table>
        </Col>
      </Row>
      <Footer
        footer={styles.footer}
        length={tableData.length}
        current={page}
        buttonGroup={
          <>
            <Button className={styles.addBtn} onClick={addPlan}>
              添加计划
            </Button>
            <Button>导出数据</Button>
          </>
        }
      />
    </>
  );
}
